<template>
  <div class="container">
     <div class="jisuan">
    <input v-model="inpu1" placeholder="请输入第一个值">
      <select v-model="selected" style="text-align: center; font-size: 15px;">
          <option disabled value="">请选择</option>
          <option>+</option>
          <option>-</option>
          <option>*</option>
          <option>/</option>
          <option>%</option>
      </select>
      <input v-model="inpu2" placeholder="请输入第二个值">
      <button id="btn" @click="fun">等于</button>
      <span id="result">{{spa}}</span>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
       inpu1: parseInt(0),
       inpu2: parseInt(0),
       selected: "+",
       spa: 0,
    }
  },
  methods:{
    //  fun: function () {
    //     if(this.selected=="+"){
    //         this.spa =Number(this.inpu1)+Number(this.inpu2)
    //     }else if(this.selected=="-"){
    //     this.spa =Number(this.inpu1)-Number(this.inpu2)
    //     }else if(this.selected=="*"){
    //     this.spa =Number(this.inpu1)*Number(this.inpu2)
    //     }else if(this.selected=="/"){
    //     this.spa =Number(this.inpu1)/Number(this.inpu2)
    //     }else if(this.selected=="%"){
    //     this.spa =Number(this.inpu1)%Number(this.inpu2)
    //     }
    // }

    fun:function(){
         switch (this.selected) {
             case '+':
                this.spa = (+this.inpu1) + (+this.inpu2)
                 break;
             case '-':
                this.spa =  (+this.inpu1) - (+this.inpu2)
                 break;
             case '*':
                this.spa=  (+this.inpu1) * (+this.inpu2)
                 break;
             case '/':
                this.spa=  (+this.inpu1) / (+this.inpu2)
                 break;
             case '%':
                this.spa=  (+this.inpu1) % (+this.inpu2)
                 break;
             default:'输入错误'

            } 

    }

  },
}
</script>

<style scoped>

</style>

